<script lang="ts" setup>
import {ref, onMounted} from 'vue';
import {Toast} from "tdesign-mobile-vue";
import ImgList from "./common/imgList.vue";
import {queryBgImgMaterialList, queryGraphCategory, queryGraphList, queryTemplateList} from "@/api/editor/materials";
import {useEditor} from "@/views/Editor/app";
import usePageMixin from "@/mixins/pageMixin";

// 取得编辑器和全局分页信息
const {editor} = useEditor();
// 定义响应式数据
const pages = ref<Record<string, any>>({});
const visibleSticker = ref(false);
const keyword = ref('');
const currentCate = ref(null);
const cateList = ref([]);

// 事件发射器
const emit = defineEmits(['success']);

// 添加贴纸
const add = async (url) => {
    emit('success', url);
};

// 打开和关闭贴纸选择器
const open = () => {
    visibleSticker.value = true;
};
const hide = () => {
    visibleSticker.value = false;
};


/**
 * 注意：这里的背景填充是整个画布的背景
 */

const fillArray = ref([])
watchEffect(() => {
    if (editor.contentFrame.proxyData.fill) {
        fillArray.value = <any>editor.contentFrame.proxyData.fill
    } else {
        fillArray.value = []
    }
})

const refreshFill = () => {
    editor.selectObject(null)
    editor.contentFrame.proxyData.fill = []
    editor.contentFrame.proxyData.fill = fillArray.value.length <= 0 ? [] : fillArray.value
}
const setBGcolor = (color: string) => {
    fillArray.value.push({
        type: 'solid',
        color: color,
    })
    refreshFill()
}
const setBgImage = (item: any) => {
    fillArray.value.push({
        type: 'image',
        url: item.url,
    })
    refreshFill()
}
const {page} = usePageMixin()
page.pageSize = 30
const fetchData = () => {
    queryTemplateList(page).then(res => {
        if (res.success) {
            const newDataList = res.data.records
            if (newDataList.length > 0) {
                page.dataList.push(...newDataList)
                page.pageNum += 1
            }
            if (page.dataList.length >= res.data.total) {
                page.noMore = true
            } else {
                page.noMore = false
            }
        }
    })
}
// 组件挂载时获取数据
onMounted(() => {
    fetchData();
});

// 暴露给外部调用的方法
defineExpose({
    add, open, hide,
});
</script>

<template>
    <t-popup v-model="visibleSticker" placement="bottom" destroy-on-close :showOverlay="false" style="height: 80%">
        <div style="height: 100%;">
            <div class="pop-header">
                <div class="title p-l-0! overflow-auto">

                </div>
                <div class="btn btn--cancel" @click="hide">
                    <t-icon name="close-circle" size="18"></t-icon>
                </div>
            </div>
            <div class="pop-content" style="height: calc(100% - 30px)">
                <div class="groups">
                    <div data-v-ef675ca6="" class="box" v-for="(item,index) in page.dataList" :key="index">
                        <div data-v-ef675ca6="" class="group">
                            <img data-v-ef675ca6=""
                                 :src="item.cover"
                                 :alt="item.name">
                            <div data-v-ef675ca6="" class="like"></div>
                        </div>
                        <div data-v-ef675ca6="" class="title">{{item.title}}</div>
                        <div data-v-ef675ca6="" class="user">
                            <div data-v-ef675ca6="" class="left">
                                <span data-v-ef675ca6="" class="tag">VIP</span></div>
                            <div data-v-ef675ca6="" class="button">
                                <t-button size="extra-small" theme="primary">使用</t-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t-popup>
</template>

<style lang="less" scoped>
@import "../../../styles/pop-style.less";

.image-group {
  display: flex;

  .tpl-img {
    width: 140px;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
  }
}

.image-gallery {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
  gap: 10px; /* 图片间的间距 */
}

.image-item {
  flex: 0 0 calc(50% - 10px); /* 每个元素占据50%宽度减去gap，形成两列 */
  box-sizing: border-box; /* 确保padding和border被包含在width内 */
}

.image-item img {
  //width: 100%; /* 图片宽度占满其容器 */
  //height: auto; /* 保持图片的宽高比 */
  display: block; /* 去除图片下方的空白间隙 */
}

.groups {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow-y: auto;
  padding: .625rem .3125rem;
  -webkit-overflow-scrolling: touch
}

.groups .box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border: .0625rem solid #f4f4f4;
  overflow: hidden;
  width: 46%;
  margin: 0 2% .625rem
}

.groups .box .group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f4f4f4;
  width: 100%;
  height: calc(420px * .42);
  border-radius: .1875rem
}

.groups .box .group img {
  max-height: 90%;
  max-width: 90%
}

.groups .box .title {
  display: block;
  overflow: hidden;
  padding: 0 .5rem;
  margin-top: .75rem;
  width: 100%;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  color: #241e24
}

.groups .box .user {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  padding: .625rem .5rem
}

.groups .box .user .left {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 70%;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;

  .tag {
    background-color: #0009;
    box-shadow: 0 1px 4px #00000029;
    padding: 0 6px;
    color: #FFD700;
    border-radius: 4px;
  }
}

//
//.groups .box .tag {
//  background-color: #0009;
//  border-radius: 8px;
//  top: 6px;
//  box-shadow: 0 1px 4px #00000029;
//  color: #fff;
//  font-size: 12px;
//  height: 16px;
//  line-height: 16px;
//  padding: 0 6px;
//  position: absolute;
//  left: 6px;
//  z-index: 11
//}
</style>
